import { ref } from 'vue'
import * as echarts from 'echarts'
function useBarChart(parkInfo) {
  const barChart = ref(null)
  const initBarChart = () => {
    // 1. 取出收入分析的数据 
    // 2. 定义option图表选项
    // 3. 创建echarts实例
    // 4. 基于实例和选项 - 显示图表
    // 1. 解构图表数据
    const { parkIncome } = parkInfo.value
    // 2. == 根据业务：准备好的options数据 ==
    const barOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        // 让图表占满容器
        top: '10px',
        left: '0px',
        right: '0px',
        bottom: '0px',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
            show: false,
          },
          // x轴绑定数据
          data: parkIncome.xMonth,
        },
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '园区年度收入',
          type: 'bar',
          barWidth: '10px',
          data: parkIncome.yIncome.map((item, index) => {
            const color =
              index % 2 === 0
                ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0.23, color: '#74c0f8' },
                  { offset: 1, color: 'rgba(116,192,248,0.00)' },
                ])
                : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0.23, color: '#ff7152' },
                  { offset: 1, color: 'rgba(255,113,82,0.00)' },
                ])
            return { value: item, itemStyle: { color } }
          }),
        },
      ],
      textStyle: {
        color: '#B4C0CC',
      },
    }
    const myChart = echarts.init(barChart.value)
    myChart.setOption(barOption)
  }
  return {
    barChart,
    initBarChart
  }
}

export { useBarChart }